<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 15px;
      font-family: Arial, sans-serif;
    }
    .control-group {
      margin-bottom: 15px;
    }
    .slider {
      width: 100%;
      margin: 10px 0;
    }
    label {
      display: block;
      margin-bottom: 5px;
      color: #333;
    }
    .value-display {
      color: #666;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <div class="control-group">
    <label>播放速度 (<span id="speed-value">1.0</span>x)</label>
    <input type="range" id="speed-control" class="slider" 
           min="0.1" max="20" step="0.1" value="1">
  </div>
  <div class="control-group">
    <label>视频进度 (<span id="progress-value">0</span>%)</label>
    <input type="range" id="progress-control" class="slider"
           min="0" max="100" step="1" value="0">
  </div>
  <script src="popup.js"></script>
</body>
</html> 